<template>
  <div>
    <div ref="targetElement" class="layout-prompt" v-if="submitListingCount > 0">
      <el-badge :value="submitListingCount" color="green" @click="drawer = true">
        <div class="layout-prompt-circle">
          <el-icon color="#1456f0"><UploadFilled /></el-icon>
        </div>
      </el-badge>
    </div>
    <el-drawer v-model="drawer" title="收藏的产品" direction="btt" :before-close="handleClose" size="80%">
      <div>
        <pre-submit-listing :showSearch="true" />
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, useTemplateRef } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { preSubmitListingCount } from '@/api/common'
import { globalSubmitListingEvent } from '@/plugins/util/constants'
import PreSubmitListing from '@/views/user/listing/preSubmitListing.vue'
const submitListingCount = ref(0)
const reqPreSubmitListingCount = () => {
  preSubmitListingCount().then((res) => {
    submitListingCount.value = res.data
  })
}
const drawer = ref(false)
const handleClose = (done: () => void) => {
  done()
}
const targetElement = useTemplateRef('targetElement')

const startAnimation = () => {
  const element = targetElement.value
  if (element) {
    element.style.transition = 'transform 0.5s ease-in-out'
    element.style.transform = 'scale(1.5)'

    setTimeout(() => {
      element.style.transform = 'scale(1)'
    }, 500)
  }
}
watch(globalSubmitListingEvent, () => {
  reqPreSubmitListingCount()
  startAnimation()
})
onMounted(() => {
  reqPreSubmitListingCount()
})
onBeforeUnmount(() => {})
</script>
<style scoped lang="scss"></style>
